<template>
  <div class="bg-[#232324] h-[100%]">
    <el-collapse v-loading="loading">
      <el-form label-width="100" :model="states" size="default">
        <el-collapse-item title="标题" name="1">
          <el-form-item label="主标题">
            <el-input v-model="states.title.text" />
          </el-form-item>
          <el-form-item label="主标题大小">
            <el-input v-model="states.title.textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="主标题颜色">
            <el-color-picker v-model="states.title.textStyle.color" />
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="states.title.subtext" />
          </el-form-item>
          <el-form-item label="副标题大小">
            <el-input v-model="states.title.subtextStyle.fontSize" />
          </el-form-item>
          <el-form-item label="副标题颜色">
            <el-color-picker v-model="states.title.subtextStyle.color" />
          </el-form-item>

          <el-form-item label="标题左边距">
            <el-input-number v-model="states.title.left" />
          </el-form-item>
          <el-form-item label="标题右边距">
            <el-input-number v-model="states.title.right" />
          </el-form-item>
          <el-form-item label="标题上边距">
            <el-input-number v-model="states.title.top" />
          </el-form-item>
          <el-form-item label="标题下边距">
            <el-input-number v-model="states.title.bottom" />
          </el-form-item>

          <!-- <el-form-item label="标题位置">
            <el-select v-model="states.title.textAlign" placeholder="Select">
              <el-option label="左对齐" value="left" />
              <el-option label="居中" value="center" />
              <el-option label="右对齐" value="right" />
            </el-select>
          </el-form-item> -->
        </el-collapse-item>
        <el-collapse-item title="x轴" name="2">
          <el-form-item label="单位">
            <el-input v-model="states.xAxis.name" />
          </el-form-item>
          <el-form-item label="位置">
            <el-select v-model="states.xAxis.position" placeholder="Select">
              <el-option label="bottom" value="bottom" />
              <el-option label="top" value="top" />
            </el-select>
          </el-form-item>

          <el-form-item label="轴线是否显示">
            <el-switch v-model="states.xAxis.axisLine.show" />
          </el-form-item>
          <el-form-item label="x轴是否反转">
            <el-switch v-model="states.xAxis.inverse" />
          </el-form-item>
          <el-form-item label="轴线颜色">
            <el-color-picker v-model="states.xAxis.axisLine.lineStyle.color" />
          </el-form-item>
          <el-form-item label="轴线宽度">
            <el-input-number v-model="states.xAxis.axisLine.lineStyle.width" />
          </el-form-item>
          <el-form-item label="标签文字">
            <el-switch v-model="states.xAxis.axisLabel.show" />
          </el-form-item>
          <el-form-item label="标签文字颜色">
            <el-color-picker v-model="states.xAxis.axisLabel.color" />
          </el-form-item>
          <el-form-item label="标签文字大小">
            <el-input-number v-model="states.xAxis.axisLabel.fontSize" />
          </el-form-item>
          <el-form-item label="标签文字旋转">
            <el-input-number v-model="states.xAxis.axisLabel.rotate" />
          </el-form-item>
          <el-form-item label="标签文字偏移">
            <el-input-number v-model="states.xAxis.offset" />
          </el-form-item>
          <el-form-item label="刻度">
            <el-switch v-model="states.xAxis.axisTick.show" />
          </el-form-item>
          <el-form-item label="刻度长度">
            <el-input-number v-model="states.xAxis.axisTick.length" />
          </el-form-item>
          <el-form-item label="分割线">
            <el-switch v-model="states.xAxis.splitLine.show" />
          </el-form-item>
          <el-form-item label="分割线宽度">
            <el-input-number v-model="states.xAxis.splitLine.lineStyle.width" />
          </el-form-item>
          <el-form-item label="分割线颜色">
            <el-color-picker v-model="states.xAxis.splitLine.lineStyle.color" />
          </el-form-item>
          <el-form-item label="分割线类型">
            <el-select
              v-model="states.xAxis.splitLine.lineStyle.type"
              placeholder="Select"
            >
              <el-option label="实线" value="solid" />
              <el-option label="虚线" value="dashed" />
              <el-option label="点线" value="dotted" />
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="y轴" name="3">
          <el-form-item label="单位">
            <el-input v-model="states.yAxis.name" />
          </el-form-item>
          <el-form-item label="位置">
            <el-select v-model="states.yAxis.position" placeholder="Select">
              <el-option label="left" value="left" />
              <el-option label="right" value="right" />
            </el-select>
          </el-form-item>

          <el-form-item label="轴线是否显示">
            <el-switch v-model="states.yAxis.axisLine.show" />
          </el-form-item>
          <el-form-item label="y轴是否反转">
            <el-switch v-model="states.yAxis.inverse" />
          </el-form-item>
          <el-form-item label="轴线颜色">
            <el-color-picker v-model="states.yAxis.axisLine.lineStyle.color" />
          </el-form-item>
          <el-form-item label="轴线宽度">
            <el-input-number v-model="states.yAxis.axisLine.lineStyle.width" />
          </el-form-item>
          <el-form-item label="标签文字">
            <el-switch v-model="states.yAxis.axisLabel.show" />
          </el-form-item>
          <el-form-item label="标签文字颜色">
            <el-color-picker v-model="states.yAxis.axisLabel.color" />
          </el-form-item>
          <el-form-item label="标签文字大小">
            <el-input-number v-model="states.yAxis.axisLabel.fontSize" />
          </el-form-item>
          <el-form-item label="标签文字旋转">
            <el-input-number v-model="states.yAxis.axisLabel.rotate" />
          </el-form-item>

          <el-form-item label="标签文字偏移">
            <el-input-number v-model="states.yAxis.offset" />
          </el-form-item>
          <el-form-item label="刻度">
            <el-switch v-model="states.yAxis.axisTick.show" />
          </el-form-item>
          <el-form-item label="刻度长度">
            <el-input-number v-model="states.yAxis.axisTick.length" />
          </el-form-item>
          <el-form-item label="分割线">
            <el-switch v-model="states.yAxis.splitLine.show" />
          </el-form-item>
          <el-form-item label="分割线宽度">
            <el-input-number v-model="states.yAxis.splitLine.lineStyle.width" />
          </el-form-item>
          <el-form-item label="分割线颜色">
            <el-color-picker v-model="states.yAxis.splitLine.lineStyle.color" />
          </el-form-item>
          <el-form-item label="分割线类型">
            <el-select
              v-model="states.yAxis.splitLine.lineStyle.type"
              placeholder="Select"
            >
              <el-option label="实线" value="solid" />
              <el-option label="虚线" value="dashed" />
              <el-option label="点线" value="dotted" />
            </el-select>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="图例" name="4">
          <el-form-item label="是否显示">
            <el-switch v-model="states.legend.show" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker v-model="states.legend.textStyle.color" />
          </el-form-item>
          <el-form-item label="文字大小">
            <el-input-number v-model="states.legend.textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="图例方向">
            <el-select v-model="states.legend.orient" placeholder="Select">
              <el-option label="水平" value="horizontal" />
              <el-option label="垂直" value="vertical" />
            </el-select>
          </el-form-item>
          <el-form-item label="靠左距离">
            <el-input-number v-model="states.legend.left" />
          </el-form-item>
          <el-form-item label="靠顶距离">
            <el-input-number v-model="states.legend.top" />
          </el-form-item>
          <el-form-item label="图例高度">
            <el-input-number v-model="states.legend.itemHeight" />
          </el-form-item>
          <el-form-item label="图例间隔">
            <el-input-number v-model="states.legend.itemGap" />
          </el-form-item>
          <el-form-item label="图例宽度">
            <el-input-number v-model="states.legend.itemWidth" />
          </el-form-item>
          <el-form-item label="图例高度">
            <el-input-number v-model="states.legend.itemHeight" />
          </el-form-item>
          <el-form-item label="图例形状">
            <el-select v-model="states.legend.icon" placeholder="Select">
              <el-option label="圆形" value="circle" />
              <el-option label="方形" value="rect" />
              <el-option label="圆角方形" value="roundRect" />
              <el-option label="三角形" value="triangle" />
              <el-option label="菱形" value="diamond" />
              <el-option label="倒三角形" value="pin" />
              <el-option label="箭头" value="arrow" />
              <el-option label="无" value="none" />
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="容器" name="5">
          <el-form-item label="坐标系网格">
            <el-switch v-model="states.grid.show" />
          </el-form-item>
          <el-form-item label="左侧距离">
            <el-input-number v-model="states.grid.left" />
          </el-form-item>
          <el-form-item label="右侧距离">
            <el-input-number v-model="states.grid.right" />
          </el-form-item>
          <el-form-item label="顶部距离">
            <el-input-number v-model="states.grid.top" />
          </el-form-item>
          <el-form-item label="底部距离">
            <el-input-number v-model="states.grid.bottom" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="提示框" name="6">
          <el-form-item label="是否显示">
            <el-switch v-model="states.tooltip.show" />
          </el-form-item>
          <el-form-item label="提示框触发">
            <el-select v-model="states.tooltip.trigger" placeholder="Select">
              <el-option label="数据项图形触发" value="item" />
              <el-option label="坐标轴触发" value="axis" />
              <el-option label="不触发" value="none" />
            </el-select>
          </el-form-item>
          <el-form-item label="提示框背景">
            <el-color-picker v-model="states.tooltip.backgroundColor" />
          </el-form-item>
          <el-form-item label="提示框文字">
            <el-color-picker v-model="states.tooltip.textStyle.color" />
          </el-form-item>
          <el-form-item label="提示文字大小">
            <el-input-number v-model="states.tooltip.textStyle.fontSize" />
          </el-form-item>
        </el-collapse-item>
      </el-form>
    </el-collapse>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { debounce } from "@renderer/utils/other";
const loading = ref(true);
const activeNames = ref("1");
const props = defineProps({
  models: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:models"]);

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 200);
});

const states = computed({
  get: () => props.models,
  set: () => emit("update:models"),
});
</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
  padding-left: 10px !important;
}
:deep(.el-input) {
  width: 180px !important;
}
:deep(.el-select) {
  width: 180px !important;
}
</style>
